<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入昵称"
        @search="onSearch"
        @cancel="onCancel"
        @clear="onclear"
        background="#efefef"
      />
    </form>

    <!-- 搜索结果 -->
    <div class="wrapper" :style="{ height: height }"  :key="searchlist.length">
      <ul v-if="searchlist.length" >
        <li
          v-for="data in searchlist"
          :key="data.teacherid"
          class="outer"
          @click="handleouter(data.teacherInfoId)"
        >
          <div>
            <van-image width="80" height="80" round :src="data.avatar" />
          </div>

          <div class="contentright">
            <div class="name">
              <span style="font-size: 16px; color: #888">{{
                data.nickname
              }}</span>
              <span style="font-size: 10px; color: #ccc"
                >{{ data.city }}|{{ data.RefreshTime }}</span
              >
            </div>
            <div
              :style="{ background: data.sex == 2 ? '#FF4500 ' : '#99ccff' }"
              class="sex"
            >
              <i
                :class="data.sex == 2 ? 'icon-apparel' : 'icon-service'"
                class="iconfont"
              ></i>
              {{ data.age }}
            </div>
            <div style="font-size: 14px; color: #aaa">
              {{ data.short_desc }}
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 热门搜索 -->
    <div class="out" v-show="flag">
      <div class="hot">热门搜索</div>
      <div
        v-for="data in datalist"
        :key="data.teacherid"
        class="nickname"
        @click="handlehot(data.teacherInfoId)"
      >
        {{ data.nickname }}
      </div>
    </div>

    <van-empty image="search" v-if="empty" description="没找到相关昵称" />
    <router-view></router-view>
  </div>
</template>
<script>
import '../assets/iconfont/iconfont.css'
import getjson from '../directive/getjson'
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      value: '',
      datalist: [],
      searchlist: [],
      flag: true,
      height: '0',
      empty: false
    }
  },
  mounted () {
    getjson(
      'https://yapi.tuwan.com/Search/rec?callback=_jsonphcpvopftt5v',
      (res) => {
        // console.log(res.data);
        this.datalist = res.data
      }
    )
  },
  methods: {
    onCancel () {
      this.$router.back()
    },
    onclear () {
      this.flag = true
    },
    onSearch () {
      this.height = document.documentElement.clientHeight - 60 + 'px'
      getjson(
        'https://yapi.tuwan.com/Search/teacher?kw=' +
          this.value +
          '&callback=_jsonpe9s9k0mhofb',
        (res) => {
          // console.log(res.data)
          this.searchlist = res.data
          if (Object.keys(this.searchlist).length === 0) {
            console.log(this.empty)
            this.empty = true
            console.log(this.empty)
            this.height = 0
            this.flag = false

            return
          } else {
            this.empty = false
          }
          this.$nextTick(() => {
            /* eslint-disable no-new */
            new BScroll('.wrapper', {
              pullDownRefresh: { threshold: 50, stop: 20 },
              scrollbar: {
                fade: true,
                interactive: false // 1.8.0 新增
              },
              pullUpLoad: { threshold: 50 },
              click: true // 事件生效 31
            })
          })
          this.flag = false
        }
      )
    },
    handleouter (teacherInfoId) {
      this.$router.push(`/content?id=${teacherInfoId}`)
    },
    handlehot (teacherInfoId) {
      this.$router.push(`/content?id=${teacherInfoId}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.nickname {
  display: inline-block;
  background: #fff;
  height: 30px;
  line-height: 30px;
  border-radius: 20px;
  margin-right: 20px;
  margin-top: 10px;
  padding: 5px 15px;
}
div.hot {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  margin-top: 10px;
}
.out {
  padding: 0 10px;
}

.outer {
  background: #fff;
  margin-bottom: 10px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contentright {
  width: 64%;
  padding-right: 6%;
  div {
    margin-bottom: 6px;
  }
  .name {
    display: flex;
    justify-content: space-between;
  }
}
.sex {
  border-radius: 5px;
  font-size: 12px;
  color: #fff;
  width: 35px;
}
.wrapper {
  overflow: hidden;
  position: relative;
}
</style>
